<template>
	<view
		class="drag"
		:style="{
		left: posX + 'px',
		top: posY + 'px',
		transform: 'scale(' + scale + ')',
		transformOrigin: 'top left',
		opacity: opa,
		position: stop_here ? '' : 'fixed',
		cursor: !stop_here && drag_able ? 'move' : '',
		}"
		@mousedown="startDrag"
	>
    <slot></slot>
    <div v-if="drag_able && !stop_here" class="resize-handle" @mousedown.stop="startResize"></div>
  </view>
</template>

<script>
export default {
	name: "drag-box",
	props: {
		pos_x: { type: Number, default: 0 },
		pos_y: { type: Number, default: 0 },
		start_scale: { type: Number, default: 1 },
		opa: { type: Number, default: 1 },
		drag_able: { type: Boolean, default: true},
		stop_here: { type: Boolean, default: false},
	},
	data() {
		return {
			isDragging: false,
			offsetX: 0,
			offsetY: 0,
			posX: 0,
			posY: 0,
			scale: 1,
			isResizing: false,
			startMouseX: 0,
			startScale: 1
		};
	},
	watch: {
		pos_x(newVal) {
			this.posX = newVal
		},
		pos_y(newVal) {
			this.posY = newVal
		},
		start_scale(newVal) {
			this.startScale = newVal
			this.scale = newVal
		}
	},
	created() {
		this.posX = this.pos_x
		this.posY = this.pos_y
		this.startScale = this.start_scale
		this.scale = this.start_scale
	},
	methods: {
		startDrag(e) {
			if (this.isResizing || !this.drag_able || this.is_fixed) return;
			this.$emit('locationChanged', {
				x: this.posX,
				y: this.posY
			})
			this.isDragging = true;
			this.offsetX = e.clientX - this.posX;
			this.offsetY = e.clientY - this.posY;
			document.addEventListener("mousemove", this.onDrag);
			document.addEventListener("mouseup", this.stopDrag);
		},
		onDrag(e) {
			if (this.isDragging || !this.drag_able || this.is_fixed) {
				this.posX = e.clientX - this.offsetX;
				this.posY = e.clientY - this.offsetY;
				this.$emit('locationChanged', {
					x: this.posX,
					y: this.posY
				})
			}
		},
		stopDrag() {
			this.isDragging = false;
			document.removeEventListener("mousemove", this.onDrag);
			document.removeEventListener("mouseup", this.stopDrag);
		},

		// 右下角拖动缩放
		startResize(e) {
			if (!this.drag_able || this.is_fixed) return
			this.isResizing = true;
			this.startMouseX = e.clientX;
			this.startScale = this.scale;
			document.addEventListener("mousemove", this.onResizef);
			document.addEventListener("mouseup", this.stopResizef);
		},
		onResizef(e) {
			if (!this.drag_able || this.is_fixed) return
			if (this.isResizing) {
				const delta = e.clientX - this.startMouseX;
				let newScale = this.startScale + delta * 0.0001;
				this.scale = Math.max(0.2, Math.min(newScale, 3));
				this.$emit('scaleChanged', this.scale)
			}
		},
		stopResizef() {
			this.isResizing = false;
			document.removeEventListener("mousemove", this.onResize);
			document.removeEventListener("mouseup", this.stopResize);
		}
	}
}

</script>


<style scoped>
	
	.drag {
	  /* cursor: move; */
	  user-select: none;
	  -webkit-app-region: no-drag;
	  display: inline-block;
	  color: white;
	  z-index: 5;
	}

	.resize-handle {
	  position: absolute;
	  width: 16px;
	  height: 16px;
	  right: 0;
	  bottom: 0;
	  /* background: rgba(0, 0, 0, 0.3); */
	  cursor: se-resize;
	  
	  border-radius: 2px;
	}
</style>
